<template>
    <el-card>
        <el-form :inline="true" ref="searchFormRef">
            <el-form-item :label="t('common.keyWork')">
                <el-input v-model="searchForm.filter" maxlength="256" :clearable="true"
                    :placeholder="t('formDemo.pleaseKeyword')"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="onSearch">{{
                    t('common.query')
                    }}</el-button>
                <el-button icon="RefreshRight" @click="onReset(searchFormRef)">{{
                    t('common.reset')
                    }}</el-button>
            </el-form-item>
        </el-form>
        <el-button type="primary" icon="Plus" @click="subitem.isAddDialogVisible = true">{{
            t('formDemo.add')
            }}</el-button>
        <el-table :data="dictCategoryData" :border="true" :stripe="true" class="table-data">
            <el-table-column type="index" :label="t('formDemo.user.serialNumber')" width="180" />
            <el-table-column prop="id" :label="t('formDemo.dict.code')" />
            <el-table-column prop="name" :label="t('formDemo.dict.name')" />
            <el-table-column prop="key" :label="t('formDemo.dict.key')" />
            <el-table-column prop="describe" :label="t('formDemo.dict.describe')" />
            <el-table-column :label="t('formDemo.dict.operation')">
                <template #default="scope: { row: DictCategoryDto }">
                    <el-button type="primary" @click="onUpdate(scope.row.id)" size="small" icon="Edit" title="修改"
                        style="margin-left: 12px">{{ t('formDemo.update') }}</el-button>
                    <router-link :to="{ name: 'DictItem', params: { id: scope.row.id } }" :custom="true"
                        v-slot="{ navigate }">
                        <el-button @click="navigate" type="default" size="small" icon="View" title="子项">{{
                            t('formDemo.subitem') }}</el-button>
                    </router-link>
                    <el-popconfirm :title="`你确定删除${scope.row.name}?`" @confirm="onRemove(scope.row.id)" width="200px">
                        <template #reference>
                            <el-button type="danger" size="small" icon="Delete" title="删除">{{
                                t('formDemo.delete')
                                }}</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="page.pageNo" v-model:page-size="page.pageSize"
            :page-sizes="[10, 15, 20, 50]" :background="true" layout="prev, pager, next, jumper, -> , sizes, total"
            :total="page.total" @current-change="getDictCategoryListAsync" @size-change="onSizeChange" />
    </el-card>
    <Show :visible="subitem.isAddDialogVisible">
        <DictAdd v-model="subitem.isAddDialogVisible" @update:refresh="onRefresh" :title="subitem.addDialogVisibleTitle"
            max-height="500px"></DictAdd>
    </Show>
    <Show :visible="subitem.isUpdateDialogVisible">
        <DictUpdate v-model="subitem.isUpdateDialogVisible" @update:refresh="onRefresh"
            :title="subitem.updateDialogVisibleTitle" :id="subitem.currentId" max-height="500px"></DictUpdate>
    </Show>
</template>
<script setup lang="ts">
import { Show } from '@/components/show/index';
import { DictAdd } from './add/index';
import { DictUpdate } from './update/index';
import { getListAsync, deleteAsync } from '@/utils/api/dict/category/index';
import { onMounted, reactive, ref } from 'vue';
import { useI18n } from '@/hooks/web/useI18n';
import type { DictCategoryDto, GetDictCategoryInput } from '@/utils/api/dict/category/type';
import type { FormInstance } from 'element-plus';
import type { PagedResultDto } from '@/utils/api/type';

const { t } = useI18n();
const searchFormRef = ref<FormInstance>();

// 分页器数据
const page = reactive({
    pageNo: 1,
    pageSize: 10,
    total: 0
});

// 查询条件
const searchForm = ref<GetDictCategoryInput>({
    filter: '',
    skipCount: 0,
    maxResultCount: 10
});

// 列表数据
const dictCategoryData = ref<DictCategoryDto[]>([]);

// 子项
const subitem = reactive({
    isAddDialogVisible: false,
    addDialogVisibleTitle: t('formDemo.add'),
    isUpdateDialogVisible: false,
    updateDialogVisibleTitle: t('formDemo.update'),
    currentId: '',
});

// 修改
const onUpdate = (id: string) => {
    subitem.isUpdateDialogVisible = true;
    subitem.currentId = id;
};

// 删除
const onRemove = async (id: string) => {
    await deleteAsync(id);
    // 删除成功刷新页面
    await onRefresh();
};

// 刷新
const onRefresh = async () => {
    await getDictCategoryListAsync();
};

//分页器下拉菜单发生变化触发
const onSizeChange = async (pageSizes: number) => {
    page.pageSize = pageSizes;
    await getDictCategoryListAsync();
};

// 组件挂载完成
onMounted(async () => {
    await getDictCategoryListAsync();
});

// 查询
const onSearch = async () => {
    await getDictCategoryListAsync();
};

// 重置
const onReset = (formEl: FormInstance | undefined) => {
    if (!formEl) {
        return;
    }
    formEl.resetFields();
};


// 查询列表
const getDictCategoryListAsync = async (pager = 1) => {
    page.pageNo = pager;
    searchForm.value.maxResultCount = page.pageSize;
    searchForm.value.skipCount = (page.pageNo - 1) * page.pageSize;
    const result: PagedResultDto<DictCategoryDto> = await getListAsync(searchForm.value);
    page.total = result.totalCount;
    dictCategoryData.value = result.items;
};
</script>"
<style scoped lang="scss">
.table-data {
    width: 100%;
    margin: 20px 0;
}
</style>